<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #div1 {width:600px;height:70px;padding:10px;border:1px solid #aaaaaa;}
        </style>
        <script>
            function allowDrop(ev)
            {
                ev.preventDefault();
            }

            function drag(ev)
            {
                ev.dataTransfer.setData("Text",ev.target.id);
            }

            function drop(ev)
            {
                var data=ev.dataTransfer.getData("Text");
                ev.target.appendChild(document.getElementById(data));
                ev.preventDefault();
            }
        </script>
    </head>
    <body>
                
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
        <br>
        <p id="drag1" draggable="true" ondragstart="drag(event)">
            This is a draggable paragraph. Drag this element into the rectangle.
        </p>        
        
        <a href="http://www.w3schools.com/" tabindex="2">W3Schools</a><br>
        <a href="http://www.google.com/" tabindex="1">Google</a><br>
        <a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
        <p><b>Note:</b> Try navigating the links by using the "Tab" button on you keyboard.</p>
        
        <div contenteditable="true" spellcheck="true">edit here. asdf</div>
        
        
    </body>
</html>
